<template>
  <div class="app1">
    <div class="topheader">
      <div class="warp">
        <div class="title">5G云招商 助推企业渠道建设</div>
        <div class="afterbg">
          <div class="innerbox"></div>
        </div>
        <div class="subtitle">
          招商APP系统——助力企业随时随地召开线上项目招商会
        </div>
      </div>
    </div>
    <div class="connect">
      <div class="title">招商新模式 重塑企业与客户的连接</div>
      <div class="afterc">
        <img src="" alt="" />
      </div>
    </div>
    <div class="itemwarp">
      <div class="item item1">
        <img src="/image/app/item1.png" alt="" />
        <p>招商APP定制</p>
      </div>
      <div class="item item2">
        <img src="/image/app/item2.png" alt="" />
        <p>数据管控系统定制</p>
      </div>
      <div class="item item3">
         <img src="/image/app/item5.png" alt="" />
        <p>招商小程序定制</p>
      </div>
      <div class="item item4">
        <img src="/image/app/item4.png" alt="" />
        <p>管理体系定制</p>
      </div>
      <div class="item item5">
        <img src="/image/app/item3.png" alt="" />
        <p>招商人员培训定制</p>
       
      </div>
      <div class="item item6">
        <img src="/image/app/item6.png" alt="" />
        <p>流程/经验输出</p>
      </div>
    </div>
    <div class="scheme">
      <div class="title">招商APP 5G新时代招商场景一体化解决方案</div>
      <div class="content">
        <div class="item">
          <div class="tittle">公司展示</div>
          <div class="container">
            企业通过企业介绍、创始人说、教学体系、运营体系、公司全景等全方位展示企业实力，让客户更全面了解公司及项目，增加客户对项目的信任度。
          </div>
        </div>
        <div class="item">
          <div class="tittle">在线招商直播</div>
          <div class="container">
            通过现在非常流行的直播方式，让客户在线参加招商会，客户无需到企业参加招商会，实现远程签约，降低了企业和客户的成本，同时提高了运营效率。
          </div>
        </div>
        <div class="item">
          <div class="tittle">商学院</div>
          <div class="container">
            企业为合作伙伴提供专家解答、热门问题解析等，对他们进行企业文化、市场运营、课程体系等专业、系统、全面的培训。
          </div>
        </div>
        <div class="item">
          <div class="tittle">咨询</div>
          <div class="container">
            通过线上互动、交流及时回复客户感兴趣的话题，解决客户的疑虑。
          </div>
        </div>
        <div class="item">
          <div class="tittle">在线互动</div>
          <div class="container">
            通过音/视频沟通，短信平台、在线客服等服务提高沟通效率。
          </div>
        </div>
      </div>
    </div>
    <div class="problemSolving">
      <div class="title">帮助客户解除问题</div>
      <div class="itemwarp1">
        <div class="item item1">
          <img src="/image/app/footer1.png" alt="" />
          <div>
            <p>无法实地</p>
            <p>考察企业</p>
          </div>
        </div>
        <div class="item item2">
          <img src="/image/app/footer2.png" alt="" />
          <div>
            <p>没有时间</p>
            <p>参加招商会</p>
          </div>
        </div>
        <div class="item item3">
          <img src="/image/app/footer3.png" alt="" />
          <div>
            <p>会议参会</p>
            <p>人数限制</p>
          </div>
        </div>
        <div class="item item4">
          <img src="/image/app/footer4.png" alt="" />
          <div>
            <p>线下招商会</p>
            <p>成本高</p>
          </div>
        </div>
        <div class="item item5">
          <img src="/image/app/footer5.png" alt="" />
          <div>
            <p>对招商人员能力</p>
            <p>过度依赖</p>
          </div>
        </div>
        <div class="item item6">
          <img src="/image/app/footer6.png" alt="" />
          <div>
            <p>更多</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.app1 {
  width: 100%;
  height: 100%;
  .topheader {
    background: url("/image/app/bg.png")no-repeat;
    background-size: 100% 100%;
    height: 565px;
    .warp {
      width: 1184px;
      margin: 0 auto;
      padding-left: 16px;
      padding-top: 258px;
    }
    .title {
      font-size: 48px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 2px;
      color: #f5f6f9;
    }
    .afterbg {
      margin-top: 30px;
      width: 503px;
      height: 3px;
      background-color: #ffffff;
      border-radius: 2px;
      opacity: 0.3;
      position: relative;
      .innerbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 3px;
        background-color: #99ff61;
        border-radius: 2px;
      }
    }
    .subtitle {
      margin-top: 38px;
      font-size: 24px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 1px;
      color: #f5f6f9;
    }
  }
  .connect {
    .title {
      margin-top: 63px;
      text-align: center;
      font-size: 38px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 2px;
      color: #333333;
    }
  }
  .itemwarp {
    margin: 0 auto;
    padding-bottom: 126px;
    display: flex;
    width: 1186px;
    flex-wrap: wrap;
    & > div:nth-of-type(3n-1) {
      margin: 0 62px 0 64px;
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 327px;
      height: 330px;
      background-color: #ffffff;
      box-shadow: 0px 7px 43px 0px rgba(72, 140, 191, 0.33);
      border-radius: 10px;
      p {
        font-size: 25px;
        letter-spacing: 1px;
        color: #333333;
      }
    }
    .item1 {
      p {
        margin-top: 53px;
      }
      img {
        margin-top: 70px;
      }
    }
    .item2 {
      p {
        margin-top: 65px;
      }
      img {
        margin-top: 82px;
      }
    }
    .item3 {
      p {
        margin-top: 58px;
      }
      img {
        margin-top: 75px;
      }
    }
    .item4 {
      p {
        margin-top: 49px;
      }
      img {
        margin-top: 81px;
      }
    }
    .item5 {
      p {
        margin-top: 38px;
      }
      img {
          margin-bottom: 26px;
        margin-top: 69px;
      }
    }
    .item6 {
      p {
        margin-top: 38px;
      }
      img {
        margin-top: 71px;
      }
    }
    .item4,
    .item5,
    .item6 {
      margin-top: 62px !important;
    }
  }
  .scheme {
    padding-top: 52px;
    padding-bottom: 54px;
    background-image: linear-gradient(
        -90deg,
        #5de2d8 0%,
        #54d0db 22%,
        #328fe6 100%
      ),
      linear-gradient(#f5f6f9, #f5f6f9);
    background-blend-mode: normal, normal;
    .title {
      text-align: center;
      font-size: 38px;
      letter-spacing: 2px;
      color: #ffffff;
    }
    .content {
      margin: 0 auto;
      margin-top: 56px;
      width: 1186px;
      padding: 0 86px;
      .item {
        background: url("/image/app/itembg.png") no-repeat;
        width: 1000px;
        height: 180px;
        margin: 0 auto;
        margin-bottom: 35px;
        box-sizing: border-box;
        padding: 0 75px 0 86px;
      }
    }
    .tittle {
      padding-top: 28px;
      font-size: 32px;
      letter-spacing: 2px;
      color: #ffffff;
    }
    .container {
      line-height: 38px;
      font-size: 20px;
      padding-bottom: 45px;
      letter-spacing: 1px;
      color: #ffffff;
    }
  }
  .problemSolving {
    .title {
      margin-top: 56px;
      text-align: center;
      background: url("/image/app/problemSolvingbg.png") no-repeat;
      background-position: top center;
      font-size: 35px;
      line-height: 80px;
      letter-spacing: 4px;
      color: #4a7cee;
    }
    .itemwarp1 {
      width: 1000px;
      margin: 0 auto;
      margin-top: 100px;
      padding-bottom: 116px;
      display: flex;
      flex-wrap: wrap;
      & > div:first-of-type {
        background: url("/image/app/border.png");
      }
      .item2,
      .item5 {
        margin: 0 197px;
      }
      .item6,
      .item5,
      .item4 {
        margin-top: 62px;
      }
      .item1 {
        img {
          margin-top: 51px;
        }
        div {
          margin-top: 23px;
        }
      }
      .item2 {
        img {
          margin-top: 48px;
        }
        div {
          margin-top: 25px;
        }
      }
      .item3 {
        img {
          margin-top: 50px;
          margin-bottom:14px;
        }
        div {
          margin-top: 15px;
        }
      }
      .item4 {
        img {
          margin-top: 46px;
        }
        div {
          margin-top: 29px;
        }
      }
      .item5 {
        img {
          margin-top: 51px; 
        }
        div {
          margin-top: 30px;
        }
      }
      .item6 {
        img {
          margin-top: 79px;
        }
        div {
          margin-top: 40px;
        }
      }
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 200px;
        height: 200px;
        border-radius: 6px;
        border: solid 1px #d2d2d2;
        div {
          font-size: 24px;
          line-height: 25px;
          letter-spacing: 1px;
          color: #444444;
          text-align: center;
        }
      }
    }
  }
}
</style>
